<!--
 * @Author: zhangweinan
 * @Date: 2022-12-06 13:38:22
 * @LastEditors: zhangweinan
 * @LastEditTime: 2023-01-06 16:41:49
 * @Description: file content
 * @FilePath: \front-end-of-task-center\src\views\roles\expert_database\detail.vue
-->
<template>
  <div class="expert_detail">
    <p class="infoStyle">
      <svg-icon icon-class="base_info" class="svg_icon_style" />
      <span class="svg_icon_span">基本信息</span>
    </p>
    <el-descriptions
      style="margin-bottom: 20px"
      :column="3"
      border
      :labelStyle="{ width: '100px' }"
      :contentStyle="{ width: '250px' }"
    >
      <el-descriptions-item>
        <template slot="label"> 专家姓名 </template>
        {{ formData.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 性别 </template>
        {{ formData.gender == 1 ? "男" : "女" }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 民族 </template>
        {{ formData.nation || "暂无数据" }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 出生年月 </template>
        {{ parseTime(formData.birthday).split(" ")[0] }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 身份证号 </template>
        {{ formData.idCard }}
      </el-descriptions-item>
    </el-descriptions>
    <p class="infoStyle">
      <svg-icon icon-class="contact-info" class="svg_icon_style" />
      <span class="svg_icon_span">联系信息</span>
    </p>
    <el-descriptions
      style="margin-bottom: 20px"
      :column="3"
      border
      :labelStyle="{ width: '100px' }"
      :contentStyle="{ width: '250px' }"
    >
      <el-descriptions-item>
        <template slot="label"> 联系电话 </template>
        {{ formData.phone || "暂无数据" }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 邮箱地址 </template>
        {{ formData.email || "暂无数据" }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 所在地区 </template>
        {{ formData.organList }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 常驻地址 </template>
        {{ formData.address }}
      </el-descriptions-item>
    </el-descriptions>
    <p class="infoStyle">
      <svg-icon icon-class="major" class="svg_icon_style" />
      <span class="svg_icon_span">专业信息</span>
    </p>
    <el-descriptions
      style="margin-bottom: 20px"
      :column="3"
      border
      :labelStyle="{ width: '100px' }"
      :contentStyle="{ width: '250px' }"
    >
      <el-descriptions-item>
        <template slot="label"> 专业背景 </template>
        {{ formData.major }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 毕业院校 </template>
        {{ formData.graduateSchool || "暂无数据" }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 最高学历 </template>
        {{ formData.maxEducation || "暂无数据" }}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label"> 所在单位 </template>
        {{ formData.unitName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 职称 </template>
        {{ formData.jobTitle }}
      </el-descriptions-item>
      <el-descriptions-item :span="3">
        <template slot="label"> 研究方向 </template>
        {{ formData.studyDirection }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 作品成果 </template>
        {{ formData.works }}
      </el-descriptions-item>
    </el-descriptions>
    <p class="infoStyle">
      <svg-icon icon-class="field" class="svg_icon_style" />
      <span class="svg_icon_span">擅长领域</span>
    </p>
    <div style="margin-bottom: 20px; margin-left: 20px">
      <el-tag v-for="(item, idx) in formData.areaExpertise" :key="idx">{{
        item
      }}</el-tag>
    </div>
    <p class="infoStyle">
      <svg-icon icon-class="other-label" class="svg_icon_style" />
      <span class="svg_icon_span">其他标签</span>
    </p>
    <div style="margin-bottom: 20px; margin-left: 20px">
      <el-tag v-for="(item, idx) in formData.tags" :key="idx"
        >{{ item }}
      </el-tag>
    </div>
  </div>
</template>
<script>
import { getExperiseDetail, deleteExperise } from "@/api/enterprise/expert";
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        address: "2",
        areaExpertise: "标签一",
        birthday: 1670342400000,
        createTime: 1670487767000,
        creator: "129",
        deleted: false,
        email: "2",
        gender: 1,
        graduateSchool: "2",
        headImgUrl: null,
        id: 5,
        idCard: "2",
        identityTag: "2",
        isSystemUser: null,
        jobTitle: "2",
        major: "2",
        maxEducation: "2",
        name: "2",
        nation: "2",
        organId: null,
        phone: "2",
        tags: "标签一,研究",
        unitAddress: "2",
        unitName: "2",
        updateTime: 1670487767000,
        updater: "129",
        userId: null,
        works: "2",
      },
      imageUrl: "",
      editId: "",
    };
  },
  computed: {},
  watch: {},
  created() {
    //获取详情数据
    this.editId = this.$route.query.editId;
    this.getExperiseDetail();
  },
  mounted() {},
  methods: {
    getExperiseDetail() {
      getExperiseDetail(this.editId).then((res) => {
        let { data } = res;
        this.formData = data;
        this.formData.areaExpertise = data.areaExpertise
          ? data.areaExpertise.split(",")
          : [];
        this.formData.tags = data.tag ? data.tags.split(",") : [];
        this.imageUrl = data.headImgUrl;
        this.formData.organList = data.organList
          ? data.organList.map((item) => item.name).join("/")
          : "暂无数据";
      });
    },
    editExperiseInfo() {
      this.$router.push({
        path: "/expert/expert_database/add",
        query: { editId: this.editId },
      });
    },
    deleteExperiseInfo() {
      deleteExperise([this.editId]).then((res) => {
        this.$message.success("删除成功");
        this.$router.push({
          path: "/roles/expertDatabase",
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.expert_detail {
  margin: 20px;
  height: 100%;
  width: 70%;
  box-sizing: border-box;
  .detail_card {
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
    .detail_content {
      display: flex;
      .left_div {
        flex: 1;
      }
      .middle_div {
        width: 200px;
        padding: 0 20px;
      }
      .right_div {
        width: 200px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        text-align: end;
      }
    }
    .btn_div {
      text-align: end;
    }
  }
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 1px dashed;
  font-size: 28px;
  color: #8c939d;
  width: 160px;
  height: 160px;
  line-height: 160px;
  text-align: center;
}
.avatar {
  width: 160px;
  height: 160px;
  display: block;
}
.svg_icon_style {
  font-size: 24px;
  margin-right: 8px;
}
.svg_icon_span {
  font-size: 16px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #494a4e;
}
::v-deep .el-form-item {
  margin-bottom: 0 !important;
}
.tag_span {
  span {
    padding: 5px 15px;
    margin-left: 5px;
    background: #f4f4f5;
    border-radius: 4px;
  }
  // span:hover {
  //   color: #0668f8;
  // }
}
.infoStyle {
  height: 40px;
}
</style>
